<template>
    <svg viewBox="0 0 100 100" height="100px" width="100px" @click="stopClick">
        <circle class="out_circle" cx="50" cy="50" r="50"/>
        <circle class="inner_circle" cx="50" cy="50" r="44.5"/>
        <rect class="out_circle" x="22" y="44" width="57" height="31" rx="5"/>
        <path :class="flag?'key':'keyone'"
              d="M30,45c-1.12125-12.64019,7.95422-20.07779,18-24,11.16621-1.02506,23.00313,9.75466,22,24"
              transform="translate(0)"
        />
    </svg>
</template>

<script setup>
import {ref} from "vue";

let flag = ref(true)

function stopClick() {
    console.log(flag.value)
    flag.value = !flag.value
}


</script>

<style scoped lang="scss">
svg{
    cursor: pointer;
}
.out_circle {
    fill: lime;
}

.inner_circle {
    fill: #fff;
}

.key {
    fill: none;
    stroke: lime;
    stroke-miterlimit: 10;
    stroke-width: 7px;
}
.keyone{
    fill: none;
    stroke: lime;
    stroke-miterlimit: 10;
    stroke-width: 7px;
    stroke-dasharray: 320;
    stroke-dashoffset: 270;
    animation: dashone 0.5s linear;
}

@keyframes dashone {
    from {
        stroke-dashoffset: 250;
    }
    to {
        stroke-dashoffset: 270;
    }
}

</style>
